<template>
  <el-dialog  width="780px" :title="title" :visible.sync="visible">
    <el-form ref="form" :rules="rules" :model="model" label-width="160px"  size="small"   v-loading="loading">
      <el-form-item label="分类编码" prop="code">
        <el-input v-model="model.code"></el-input>
      </el-form-item>
      <el-form-item label="资产大类"  prop="classes">
        <el-select v-model="model.classes" placeholder="请选择">
          <el-option key="1" label="土地" :value="1"></el-option>
          <el-option key="2" label="房屋及构筑物" :value="2"></el-option>
          <el-option key="3" label="通用设备" :value="3"></el-option>
          <el-option key="4" label="车辆" :value="4"></el-option>
          <el-option key="5" label="专用设备" :value="5"></el-option>
          <el-option key="6" label="文物及陈列品" :value="6"></el-option>
          <el-option key="7" label="图书档案" :value="7"></el-option>
          <el-option key="8" label="家具用具及装具" :value="8"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称"  prop="typeName">
        <el-input v-model="model.typeName"></el-input>
      </el-form-item>
      <el-form-item label="折旧总月数"  prop="depreciationMonth">
        <el-input-number controls-position="right" v-model="model.depreciationMonth"></el-input-number>
      </el-form-item>

      <el-form-item label="备注" >
        <el-input v-model="model.note" type="textarea" :rows="2"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import Vue from 'vue'
  import { MessageBox, Message,Notification } from 'element-ui'
  import pick from 'lodash.pick'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction,deleteAction,putAction,postAction } from '@/api/manage'

  export default {
    name: "AssetClassesModal",
    components: {
    },
    data () {
      return {
        title:"操作",
        visible: false,
        loading:false,
        model: {},
        url: {

        },  // 新增资产表单验证
        rules: {
          code: [{ required: true, message: '请输入分类编码', trigger: 'blur' }],
          classes: [{ required: true, message: '请选择资产大类', trigger: 'change' }],
          typeName:[ { required: true, message: '请输入分类名称', trigger: 'blur' }],
          depreciationMonth:[ { required: true, message: '折旧总月数', trigger: 'blur' }]
        },
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}

    },
    methods: {
      refresh () {

      },
      add () {
        this.refresh();
        this.edit({ depreciationMonth : 0 });
      },
      edit (record) {
        let that = this;
        if(that.$refs.form){
          that.$refs.form.resetFields();
        }
        that.model = Object.assign({}, record);
        this.visible = true;
      },
      handleSubmit () {
        const that = this;
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            let promise;
            if(!this.model.id){
                promise =  postAction("/classes/add",this.model);
            }else{
                 promise =  putAction("/classes/edit",this.model);
            }
            promise.then(res =>{
                if(res.success){
                this.$message.success(res.message)
                that.$emit('ok');
                }else{
                this.$message.warning( res.message)
                }
            }).finally(() => {
                this.loading = false
                that.close();
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCancel () {
        this.close()
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>
